<template>
  <div class="products">
    <!--遍历item中的数据-->
    <pro-list-item v-for="item in products" :pro-list-item="item" :key="item.id"/>
  </div>
</template>

<script>
  import ProListItem from "./ProListItem";

  export default {
    name: "ProductsList",
    components: {
      ProListItem
    },
    props: {
      products: {
        type: Array,
        default() {
          return []
        }
      }
    }
  }
</script>

<style scoped>
  .products {
    display: flex;
    /**
    默认值为nowrap，表示不包裹，所有东西都放在一行显示
    wrap：包裹。根据宽度来决定一行显示多少个
    */
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 2px;
  }
</style>
